/**
 * Created by Dalyn on 2017/2/28.
 */
import React from "react";
import { hashHistory } from 'react-router';
import Confirm from "../../common/Confirm";
import "./Limit.css";
import { Modal,Icon } from 'antd';
import FindRoleListMutation from "./mutation/FindRoleListMutation"
import Relay from "react-relay";
import Role_item from "./Role_item"
import DeleteRoleMutation from "./mutation/DeleteRoleMutation"
import "./css/role.css";
import ReactKey from "../../util/ReactKey";
import Util from "../../util/Util";


/*删除弹框*/
class Delete extends React.Component{
    constructor(props){
        super(props);
        this.state={
            delete:false,
            rid:'',
            enid:''
        }
        this.style={
            alert:{
                width:"300px",
                height:"160px",
                margin:"0 auto"
            }
        }
    }
    /*确定删除*/
    handleOk = (e) => {
        if(this.state.rid==1){
            alert('超级管理员不可删除');
            this.setState({
                delete: false,
            });
            return;
        }
        Relay.Store.commitUpdate(
            new DeleteRoleMutation({
                rid:this.state.rid
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {
                    let errorcode = response.deleteRole.deleteRole.errorCode;
                    if(errorcode==0){
                        this.props.getpersion();
                    }
                }
            }
        )
        this.setState({
            delete: false,
        });
    }
    /*取消删除*/
    handleCancel = (e) => {
        this.setState({
            delete: false,
        });
    }

    ///asdasdasd213
    render(){
        return (
            <Modal className="modal_gre-title"
                title="提示"
                visible={this.state.delete}
                onCancel={this.handleCancel}
                style={{width:"440px",height:"270px",display:"block"}}
                onOk={this.handleOk}
            >

                <div className="product_hint_text">
                        <Icon type="exclamation-circle"  className=".product_warning"/>

                        <span className="product_hint_word">确定删除此角色么？&nbsp;   删除后所有相关信件将丢失</span>
                </div>

            </Modal>
        )
    }
}
/*编辑组件*/
class Edit extends React.Component{
    constructor(props){
        super(props);
        this.state={
            edit:false
        }
        this.style={

        }
    }
    handleOk = (e) => {
        this.setState({
            edit: false,
            pnum:0
        });
    }
    handleCancel = (e) => {
        this.setState({
            edit: false,
        });
    }
    render(){
        return (
            <Modal visible={this.state.edit} onCancel={this.handleCancel} style={{width:"440px",height:"270px",display:"block"}}>
                <span className="limit_duty_tp">财务{this.state.pnum}人</span>
                <textarea style={{rows:5,width:360,height:115,resize:"none",outline:"none",marginTop:30,marginLeft:30,padding:10}}/>
                <span className="limit_duty_cancel" onClick={this.handleCancel}>取消</span>
                <span className="limit_duty_ok" onClick={this.handleOk}>确定</span>
            </Modal>
        )
    }
}

/*导出组件*/
export default class RoleManage extends React.Component{
    constructor(props){
        super(props);
        this.style={
            confirm:{
                width: '96px',
                height: '27px',
                backgroundColor: "#a0d468",
                fontSize: "14px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius:"3px"
            },
            page_ensure: {
                width: '39px',
                height: '22px',
                backgroundColor: "white",
                border: '1px solid #e7e6e6',
                borderRadius: '2px',
                color: "#999"
            }
        };
        this.state={
            arrgroup:[],
            /*总共多少条*/
            totalResult: "",
            /*每页条数*/
            pageItem: "",
            /*指定页码*/
            pageNum: 1,
            /*指定每页显示条数*/
            pageSize: 10,
        }
        this.group = {};
        this.arrgroup =[];
    }

    componentWillMount(){
        if(this.props.params.pageNum){
            this.setState({
                pageNum:this.props.params.pageNum,
                pageSize:this.props.params.pageSize
            },this.getpersion)
        }else{
            this.getpersion();
        }
    }

    getpersion(){
        this.arrgroup = [];
        Relay.Store.commitUpdate(
            new FindRoleListMutation({
                pageNum: this.state.pageNum,
                pageSize: this.state.pageSize
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {
                    let errorcode = response.findRoleList.findRoleList.errorCode
                    if(errorcode==0){
                        this.arrgroup = response.findRoleList.findRoleList.roleModelList
                        let data = response.findRoleList.findRoleList;
                        if( null == this.arrgroup){
                            this.leftBtn();
                        }else{
                            this.setState({
                                arrgroup:this.arrgroup,
                                totalResult: data.totalResult,
                                pageItem: this.arrgroup == null?0:this.arrgroup.length
                            })
                        }
                    }
                }
            }
        )
    }


    /*编辑*/
    edit(){
        this.refs.edit.setState({
            edit:true
        })
    }
    /*删除*/
    deletz(rid){
        this.refs.delete.setState({
            delete:true,
            rid:rid
        })
    }

    /*员工列表*/
    addList(){
        return this.state.arrgroup.map((item,index)=>{
           return(
               <Role_item item={item} pageNum={this.state.pageNum}
                          pageSize={this.state.pageSize} index={index} key={ReactKey.key}
                          edit={this.edit.bind(this)} deletz={this.deletz.bind(this)}/>
           );
        })
    }
    /*新增职务*/
    addDuty(){
        hashHistory.push('/newrole')
    }

    /*页码*/
    page() {
        let pageTotal = this.pageTotal();
        let pageNum = this.state.pageNum;
        if (pageNum < 1) {
            this.setState({
                pageNum: 1,
            }, this.getpersion)
        }else if (pageNum > pageTotal) {
            this.setState({
                pageNum: pageTotal,
            }, this.getpersion)
        } else {
            this.setState({
                pageNum: pageNum,
            }, this.getpersion)
        }
    }
    /*总页数*/
    pageTotal() {
        return Math.ceil(this.state.totalResult / this.state.pageSize)
    }

    /*上一页*/
    leftBtn() {
        let pageNum = this.state.pageNum;
        let pageTotal = this.pageTotal();
        if (pageNum <= 1 || pageNum > pageTotal) {
            return;
        } else {
            pageNum--;
            this.setState({
                pageNum: pageNum,
            }, this.getpersion)
        }
    }

    /*下一页*/
    rightBtn() {
        let pageTotal = this.pageTotal();
        let pageNum = this.state.pageNum;
        if (pageNum >= pageTotal) {
            return;
        } else {
            pageNum++;
            this.setState({
                pageNum: pageNum,
            }, this.getpersion)
        }
    }

    /*页面表单失去焦点时*/
    changePageNum(e){
        let numtest = /^[0-9]*$/;
        let text = e.target.value
        if(!numtest.test(text)){
            return
        }
        this.setState({
            pageNum:text
        });
    }

    render(){
        return (
            <div className="limit clear" id="main">
                <div className="limit_duty_box" style={{"height":"770px"}}>
                    <div style={!Util.authorityCheck("role")  ? {display: 'none'} :{}}>
                        <Confirm style={this.style.confirm} tcontext={'新增角色'} touch={this.addDuty.bind(this)}/>
                    </div>
                    <table className="limit_duty_table settle_rec_table">
                        <thead>
                            <tr>
                                {
                                    ["角色ID","角色名称","角色数量","操作"].map((item,index)=>
                                        <th key={index}> {item} </th>
                                    )
                                }
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.addList()
                            }
                        </tbody>
                    </table>
                    <div className="role_page clear">
                        <ol className="role_page_ol clear">
                            <li className="role_page_oli1">总计<span>{this.state.totalResult}</span>条</li>
                            <li className="role_page_oli2">每页<span>{this.state.pageItem}</span>条</li>
                            <li className="role_page_oli3">
                                共<span>{this.pageTotal()}</span>页
                            </li>
                            <li>第&nbsp;&nbsp;<input type="text" className="role_page_olinp" value={this.state.pageNum}
                                                    onChange={this.changePageNum.bind(this)} />&nbsp;&nbsp;页
                            </li>
                            <li><Confirm tcontext={'确定'} style={this.style.page_ensure} touch={this.page.bind(this)}
                                         bluron/>
                            </li>
                            <li className="role_page_olbtn">
                                <i className="role_page_button role_page_left" onClick={this.leftBtn.bind(this)}></i>
                                <i className="role_page_button role_page_right" onClick={this.rightBtn.bind(this)}></i>
                            </li>
                        </ol>
                    </div>
                </div>
                <Delete ref={"delete"} getpersion={this.getpersion.bind(this)}/>
                <Edit ref={"edit"}/>
            </div>

        //    确定删除此角色么？  删除后所有相关信件将丢失

        )
    }
}